import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tabs, Tools, Toast, Button, InputItem, WingBlank, WhiteSpace, Switch, List } from 'weaver-mobile';
import { Browser } from 'weaver-mobile-page';
import { createForm } from 'rc-form';
import { toJS } from 'mobx';
import loadjs from 'loadjs'

@inject('yulinStore')
@withRouter
@observer
export default class Home extends React.Component {
  tabs = [
    { title: '身份认证登录' },
    { title: '帐号密码登录' },
  ];
  onErrorClick = () => {
    const { yulinStore } = this.props;
    const { hasError, errorMsg } = yulinStore;
    if (hasError) {
      Toast.info(errorMsg);
    }
  }

  onLogin = () => {
    const { yulinStore } = this.props;
    const { doLogin } = yulinStore;
    Toast.loading('登录中……', 0);
    doLogin();
  }

  componentDidMount() {
    const { yulinStore } = this.props;
    const { doLogin, setState } = yulinStore;

    // Toast.loading('加载中……', 0);

    // window.em_ssoInit().then(() => {
    // Toast.hide();
    setState({ accountLogin: false, loading: false });
    let params = Tools.getFrameParams();
    if (params['isChange'] != '1') {
      window.localStorage['yulinAuthDatas'] = null;
      Toast.loading('登录中……', 0);
      doLogin();
      // window.location.href = '/spa/entrance/index-lzlc.html'
    }
    // }).catch((res) => {
    //   Toast.hide();
    //   Toast.info(JSON.stringify(res));
    // })
  }


  render() {
    const { yulinStore } = this.props;
    const { hasError, account, password, errorMsg, setState, accountLogin, browser, loading } = yulinStore;
    let SwitchExample = (props) => {
      const { getFieldProps } = props.form;
      return (
        <List>
          <List.Item
            extra={<Switch
              {...getFieldProps('Switch1', {
                initialValue: accountLogin,
                valuePropName: 'checked',
              })}
              onClick={(checked) => { setState({ accountLogin: checked }); }}
              platform="android"
            />}
          >使用帐号密码登录</List.Item>
        </List>
      );
    };
    SwitchExample = createForm()(SwitchExample);

    return (
      <div className='wea-yulin-login'>
        <span style={{ wordBreak: ' break-all', position: 'absolute', top: '-20%' }}>{errorMsg}</span>
        {!loading && !accountLogin && <div className='id-panel'>
          <Button type="primary" className='login-btn' inline onClick={this.onLogin}>身份认证登录</Button>
        </div>}
        {!loading && accountLogin && <div>
          <WhiteSpace size="xl" />
          <WingBlank size="lg"><InputItem
            type="text"
            placeholder="请输入帐号"
            error={hasError}
            onErrorClick={this.onErrorClick}
            onChange={(v) => setState({ account: v })}
            value={account}
          >帐号</InputItem></WingBlank>
          <WingBlank size="lg"><InputItem
            type="password"
            placeholder="请输入密码"
            error={hasError}
            onErrorClick={this.onErrorClick}
            onChange={(v) => setState({ password: v })}
            value={password}
          >密码</InputItem></WingBlank>

          <WhiteSpace size="xl" />
          <WingBlank size="lg"><Button type="primary" className='login-btn' onClick={this.onLogin}>登录</Button></WingBlank>
        </div>}
        {!loading && <SwitchExample />}
      </div>
    );
  }
}

